<template>
	<view class="page-content">
		<view class="page-title">基本使用</view><ui-br />
		<view class="page-tips">在页面中写入</view><ui-br />
		<ui-code :code="code0"></ui-code><ui-br />
		<view class="page-tips">在方法中写入</view><ui-br />
		<ui-code :code="code1"></ui-code><ui-br />
		<view class="page-title">样式演示</view><ui-br />
		<view class="page-tips">线型按钮</view><ui-br />
		<ct-button @click="open">打开线型按钮</ct-button><ui-br />
		<view class="page-tips">button型按钮</view><ui-br />
		<ct-button @click="open2">打开button型按钮</ct-button>
		<ct-modal ref="modal"></ct-modal><ui-br />
		<view class="page-title">属性说明</view><ui-br />
		<ui-table :data="tableData" /><ui-br />
	</view>
</template>

<script>
	import {code0,code1} from './code.js';
	export default {
		data() {
			return {
				code0:"",
				code1:"",
				tableData:[{
					parameter: 'title',
					values: '标题内容'
				},{
					parameter: 'content',
					values: '模态框内容，如传入slot内容，则此参数无效'
				},{
					parameter: 'confirmText',
					values: '确认按钮的文字'
				},{
					parameter: 'cancelText',
					values: '取消按钮的文字'
				},{
					parameter: 'showConfirmButton',
					values: '是否显示确认按钮'
				},{
					parameter: 'showCancelButton',
					values: '是否显示取消按钮'
				},{
					parameter: 'asyncClose',
					values: '是否异步关闭，开启后需要主动关闭'
				},{
					parameter: 'button',
					values: '开启后确认取消会变成按钮类型'
				},{
					parameter: 'buttonWidth',
					values: '设置按钮宽度，只有button为true是生效'
				},]
			}
		},
		created() {
			this.code0 = code0
			this.code1 = code1
		},
		methods: {
			open(){
				this.$refs['modal'].open({
					title:"提示",
					content:"我是弹框的内容！！！",
					confirmText:"确定",
					cancelText:"取消",
					confirm:(e)=>{},
					cancel:(e)=>{}
				})
				
			},
			open2(){
				this.$refs['modal'].open({
					title:"提示",
					content:"我是弹框的内容！！！",
					confirmText:"确定",
					cancelText:"取消",
					button:true,
					confirm:(e)=>{},
					cancel:(e)=>{}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>